import Taro from '@tarojs/taro'
import React, { useState, useEffect } from 'react'
import { AtInput, AtIcon, AtTabs, AtTabsPane, AtButton, AtModal, AtModalHeader, AtModalContent, AtModalAction, } from 'taro-ui'
import { View, Text, Image, Button } from '@tarojs/components'
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/avatar.scss";
import "taro-ui/dist/style/components/tab-bar.scss";
import "taro-ui/dist/style/components/badge.scss";
import "taro-ui/dist/style/components/modal.scss";
import './index.less';
import http from '../../utils/http'

function Index() {

  const [value, setValue] = useState('');
  const [current, setCurrent] = useState(0);
  const handleChange = (value) => {
    setValue(value);
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }
  // 请求首页数据
  const [list11, setList1] = useState([])
  function getlist1() {
    http({
      url: '/mini/index/list'
    }).then(res => {
      // console.log(res.data.data);
      res.data.data && res.data.data.forEach(v => {
        switch (v.orderStatus) {
          case '1':
            v.orderStatus = '待付款';
            break;
          case '2':
            v.orderStatus = '待接单';
            break;
          case '3':
            v.orderStatus = '待服务';
            break;
          case '4':
            v.orderStatus = '服务中';
            break;
          case '5':
            v.orderStatus = '已取消';
            break;
          case '6':
            v.orderStatus = '已完成';
            break;
          case '7':
            v.orderStatus = '退款中';
            break;
          case '8':
            v.orderStatus = '退款成功';
            break;
          case '9':
            v.orderStatus = '退款失败';
            break;

        }
      })
      setList1(res.data.data);

    })
  }
  useEffect(() => {
    getlist1();
  }, [])


  // console.log(111111, list11);



  const handleClick = (value) => {
    // console.log(11111111111111111, value);


    setCurrent(value);
    // getList1();
    return value
  }
  const tabList = [{ title: '待接单' }, { title: '待服务' }, { title: '服务中' }, { title: '已完成' }, { title: '已取消' }]

  // tabBar参数 
  // const [tabNum, setTabNum] = useState(0);
  // const handleClick2 = (value) => {
  //   setTabNum(value)
  // }
  // 接单 
  const acceptBill = () => {
    Taro.navigateTo({ url: '/pages/index/billInfo/billInfo' })
  }
  // 转单
  const transBill = () => {
    Taro.navigateTo({ url: '/pages/index/transBill/transBill' })
  }
  // 取消订单
  const [isOpen, setIsOpen] = useState(false);
  const cancelBill = () => {
    //  setIsOpen(true);
    Taro.navigateTo({ url: '/pages/index/cancelBill/cancelBill' })
  }
  // 取消订单弹框
  const onClose = (e) => {
    console.log(1)
    setIsOpen(false);
  }
  const onCancel = (e) => {
    console.log(2)
    setIsOpen(false);
  }
  const onConfirm = (e) => {
    console.log(3)
    setIsOpen(false);
    Taro.navigateTo({ url: '/pages/index/cancelBill/cancelBill' })
  }
  // 评价订单
  const assessBill = () => {
    Taro.navigateTo({ url: '/pages/index/assessBill/assessBill' })
  }
  // 发起服务按钮
  const launchServerr = () => {
    console.log(1);
    Taro.navigateTo({ url: '/pages/index/launchServer/launchServer' })
  }


  return <View className='indexCss'>
    {/* 搜索框 */}
    <View className="searchBox">
      <AtIcon value='search' size='18' color='#eee' className="iconCss1"></AtIcon>
      <AtInput
        className="inputCss1"
        name='value'
        type='text'
        placeholder='请输入订单号/姓名/服务'
        value={value}
        onChange={handleChange}
      />
    </View>
    {/* tab选项卡 */}
    <View className="tabBox">
      <AtTabs current={current} tabList={tabList} onClick={handleClick} scroll>
        <AtTabsPane current={current} index={0} >
          {
            list11.map((v, i) => {
              if (v.orderStatus == "待接单") {
                return <View className="tabList1Css">
                  {/* 第一个服务 */}
                  <View className="tab1">
                    {/* 导航 */}
                    <View className="tabNav1">
                      {/* 前面部分 */}
                      <View className="tabNav1_1">
                        <View className="tabNav1Img">
                          <Image style={{ width: '50px', height: '50px' }} src={v.serviceIcon}></Image>
                        </View>
                        <View className="tabNav1Con">
                          <Text className="tabNav1Con1">{v.serviceName}</Text>
                          <View className="tabNav1Con2">
                            <Text>￥</Text>
                            <Text>{v.serviceFee}</Text>
                          </View>
                        </View>
                      </View>
                      {/* 后面部分 */}
                      <View className="tabNav1_2">
                        <Text>{v.orderStatus}</Text>
                        <Text className="transBill">(转单)</Text>
                      </View>
                    </View>
                    {/* 导航下的服务详情 */}
                    <View className="tabBotmBox1">
                      <View><Text>服务用户：</Text><Text>{v.userName}</Text></View>
                      <View><Text>服务地址：</Text><Text>{v.serviceAddress}</Text></View>
                      <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                      {/* <View className="billInfo"><Text>转单说明：</Text><Text>帮忙服务下</Text></View> */}
                      <View className="btnBox">
                        <AtButton onClick={transBill}>转单</AtButton>
                        <AtButton onClick={cancelBill}>取消订单</AtButton>
                        <AtButton type='primary' onClick={acceptBill}>接单</AtButton>
                      </View>
                    </View>
                  </View>
                </View>

              }

            })
          }
          {/* 第一个标签里面的全部内容 */}

        </AtTabsPane>
        <AtTabsPane current={current} index={1}>
          {/* 第二个标签里面的全部内容 */}
          {
            list11.map((v, i) => {
              if (v.orderStatus == "待服务") {
                return <View className="tabList1Css">
                  {/* 第一个服务 */}
                  <View className="tab1">
                    {/* 导航 */}
                    <View className="tabNav1">
                      {/* 前面部分 */}
                      <View className="tabNav1_1">
                        <View className="tabNav1Img">
                          <Image style={{ width: '50px', height: '50px' }} src={v.serviceIcon}></Image>
                        </View>
                        <View className="tabNav1Con">
                          <Text className="tabNav1Con1">{v.serviceName}</Text>
                          <View className="tabNav1Con2">
                            <Text>￥</Text>
                            <Text>{v.serviceFee}</Text>
                          </View>
                        </View>
                      </View>
                      {/* 后面部分 */}
                      <View className="tabNav1_2">
                        <Text>距离用户300m</Text>
                      </View>
                    </View>
                    {/* 导航下的服务详情 */}
                    <View className="tabBotmBox1">
                      <View><Text>服务用户：</Text><Text>{v.userName}</Text></View>
                      <View><Text>服务地址：</Text><Text>{v.serviceAddress}</Text></View>
                      <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                      <View className="btnBox">
                        <AtButton onClick={transBill}>转单</AtButton>
                        <AtButton onClick={cancelBill}>取消订单</AtButton>
                        <AtButton type='primary'>开始服务</AtButton>
                      </View>
                    </View>
                  </View>
                </View>
              }
            })
          }
        </AtTabsPane>
        <AtTabsPane current={current} index={2}>
          {/* 第三个标签里面的全部内容 */}
          {
            list11.map((v, i) => {
              if (v.orderStatus == "服务中") {
                return <View className="tabList1Css">
                  {/* 第一个服务 */}
                  <View className="tab1">
                    {/* 导航 */}
                    <View className="tabNav1">
                      {/* 前面部分 */}
                      <View className="tabNav1_1">
                        <View className="tabNav1Img">
                          <Image style={{ width: '50px', height: '50px' }} src={v.serviceIcon}></Image>
                        </View>
                        <View className="tabNav1Con">
                          <Text className="tabNav1Con1">{v.serviceName}</Text>
                          <View className="tabNav1Con2">
                            <Text>￥</Text>
                            <Text>{v.serviceFee}</Text>
                          </View>
                        </View>
                      </View>
                      {/* 后面部分 */}
                      <View className="tabNav1_2">
                        <Text>{v.orderStatus}</Text>
                      </View>
                    </View>
                    {/* 导航下的服务详情 */}
                    <View className="tabBotmBox1">
                      <View><Text>服务用户：</Text><Text>{v.userName}</Text></View>
                      <View><Text>服务地址：</Text><Text>{v.serviceAddress}</Text></View>
                      <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                      <View className="btnBox">
                        <AtButton onClick={cancelBill}>取消订单</AtButton>
                        <AtButton type='primary'>确认完成</AtButton>
                      </View>
                    </View>
                  </View>
                </View>
              }
            })
          }
        </AtTabsPane>
        <AtTabsPane current={current} index={3}>
          {/* 第四个标签里面的全部内容 */}
          {
            list11.map((v, i) => {
              if (v.orderStatus == "已完成") {
                return <View className="tabList1Css">
                  {/* 第四个服务 */}
                  <View className="tab1">
                    {/* 导航 */}
                    <View className="tabNav1">
                      {/* 前面部分 */}
                      <View className="tabNav1_1">
                        <View className="tabNav1Img">
                          <Image style={{ width: '50px', height: '50px' }} src={v.serviceIcon}></Image>
                        </View>
                        <View className="tabNav1Con">
                          <Text className="tabNav1Con1">{v.serviceName}</Text>
                          <View className="tabNav1Con2">
                            <Text>￥</Text>
                            <Text>{v.serviceFee}</Text>
                          </View>
                        </View>
                      </View>
                      {/* 后面部分 */}
                      <View className="tabNav1_2">
                        <Text>{v.orderStatus}</Text>
                      </View>
                    </View>
                    {/* 导航下的服务详情 */}
                    <View className="tabBotmBox1">
                      <View><Text>服务用户：</Text><Text>{v.userName}</Text></View>
                      <View><Text>服务地址：</Text><Text>{v.serviceAddress}</Text></View>
                      <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                      <View className="billInfo"><Text>转单说明：</Text><Text>帮忙服务下</Text></View>
                      <View className="btnBox">
                        <AtButton>添加数据</AtButton>
                        <AtButton type='primary' onClick={assessBill}>评价</AtButton>
                      </View>
                    </View>
                  </View>
                </View>
              }
            })
          }
        </AtTabsPane>
        <AtTabsPane current={current} index={4}>
          {/* 第五个标签里面的全部内容 */}
          {
            list11.map((v, i) => {
              if (v.orderStatus == "已取消") {
                return <View className="tabList1Css">
                  {/* 第一个服务 */}
                  <View className="tab1">
                    {/* 导航 */}
                    <View className="tabNav1">
                      {/* 前面部分 */}
                      <View className="tabNav1_1">
                        <View className="tabNav1Img">
                          <Image style={{ width: '50px', height: '50px' }} src={v.serviceIcon}></Image>
                        </View>
                        <View className="tabNav1Con">
                          <Text className="tabNav1Con1">{v.serviceName}</Text>
                          <View className="tabNav1Con2">
                            <Text>￥</Text>
                            <Text>{v.serviceFee}</Text>
                          </View>
                        </View>
                      </View>
                      {/* 后面部分 */}
                      <View className="tabNav1_2">
                        <Text className="cancelCss">{v.orderStatus}</Text>
                      </View>
                    </View>
                    {/* 导航下的服务详情 */}
                    <View className="tabBotmBox1">
                      <View><Text>服务用户：</Text><Text>{v.userName}</Text></View>
                      <View><Text>服务地址：</Text><Text>{v.serviceAddress}</Text></View>
                      <View><Text>服务时间：</Text><Text>立即服务</Text></View>
                      <View><Text>取消原因：</Text><Text>不需要了</Text></View>
                    </View>
                  </View>
                </View>
              }
            })
          }
        </AtTabsPane>
      </AtTabs>
    </View>
    {/* 发起服务按钮框 */}
    <View className="severBtn">
      <AtButton type='primary' circle full onClick={launchServerr}>发起服务</AtButton>
    </View>

    {/* 底部tabBar
    <AtTabBar
      fixed
      tabList={[
        { title: '待办事项', iconType: 'bullet-list', text: 'new' },
        { title: '文件夹', iconType: 'folder', text: '100', max: 99 }
      ]}
      onClick={handleClick2}
      current={tabNum}
    /> */}
    {/* <View className="tabCss">
      <TabBar></TabBar>
    </View> */}

    {/* 取消订单确认框 */}
    <AtModal isOpened={isOpen}>
      <AtModalHeader>提示</AtModalHeader>
      <AtModalContent>
        确定取消订单吗？
      </AtModalContent>
      <AtModalAction> <Button onClick={onCancel}>取消</Button> <Button onClick={onConfirm}>确定</Button> </AtModalAction>
    </AtModal>
  </View>

}

export default Index